<template>
  <div class="demo-split">
    <Split v-model="split2" mode="vertical">
      <div slot="top" class="demo-split-pane" style="margin: 20px">

        <Form  inline label-position="left">

          <FormItem>
            <Button type="primary" icon="ios-search" @click="handleSubmit">查询
            </Button>
          </FormItem>
          <br>
          <Button type="success" style="float:right;" @click="exportExcelCount(formInline,selectValue)">导出</Button>
        </Form>
      </div>
      <div slot="bottom" class="demo-split-pane">
        <Table border :columns="columns1" :data="data2"  height="400" ></Table>
        <Page ref="page" show-total show-sizer size="small" :current="pageData.current" :total="pageData.total"
              :page-size="pageData.pageSize" :page-size-opts="pageData.pageSizeOpts"
              @on-change="changePage" @on-page-size-change="changeSize"></Page>
      </div>
    </Split>
  </div>
</template>

<script>
  import {baseUrl} from "../../api/api";
  import {downloadExcel} from "../../api/api";
    export default {
        name: "TotalSearch",
      data() {
        return {
          pageData:{
            current: 1,
            total: 0,
            pageSize: 10,
            pageSizeOpts:[10,20,50]
          },
          split2:0.3,
          columns1: [
            {
              title: '申请单位',
              key: 'applyUnit'
            },
            {
              title: '通行区间',
              key: 'passIntVal'
            },
            {
              title: '员工单位',
              key: 'employUnit'
            },{
              title: '导入类型',
              key: 'typeCode',
              render: (h, params)=>{
                let msg = "";
                if (params.row.typeCode == 1) {
                  msg = "养护生产（路网）"
                }else if (params.row.typeCode == 2) {
                  msg = "生产生活（路网）"
                }else if (params.row.typeCode == 3) {
                  msg = "养护生产（区间）"
                }else if (params.row.typeCode == 4) {
                  msg = "生产生活（区间）"
                }else{
                  msg = "员工通勤车"
                }
                return h('div', {
                  props: {},
                }, msg);
              }
            },{
              title: '导入版本号',
              key: 'buildVersion'
            },{
              title: '总数',
              key: 'total'
            },
            {
              title: '操作',
              key: 'action',
              width: 150,
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.deleteByVersion(params.row.buildVersion, params.row.typeCode,params.index)
                      }
                    }
                  }, '删除')
                ]);
              }
            }
          ],
          data2: [],
        }
      },
      methods:{
        exportExcelCount(formInline,selectValue) {
            this.$axios({
              method: 'post',
              url: baseUrl + '/publicFreeApply/exportExcelCount',
              responseType: "arraybuffer",
              traditional: true,
            }).then(res => {
              downloadExcel(res.data);
            });
        },
        deleteByVersion(buildVersion, typeCode,index) {
          const delUrl = baseUrl + "/publicFreeApply/delete"
          let data = {"buildVersion":buildVersion,"selectType":typeCode};
          this.$axios.delete(delUrl, {data:data}).then(res => {
            //清除
            this.data2.splice(index,1);

          })
        },
        changeSize(size) {
          if (this.pageData.total != 0) {
            this.$refs["page"].currentPage = Math.ceil((this.pageData.current * this.pageData.pageSize) / size)
            this.pageData.pageSize = size;
          }
        },
        changePage(index) {
          this.pageData.current=index
        },
        handleSubmit() {
          let data = {};
          let page = {
            current: this.pageData.current,
            size: this.pageData.pageSize
          }
          data.page = page;
            this.$axios({
              method: 'post',
              url: baseUrl + '/publicFreeApply/totalSearch'
            })
              .then(res => {
                this.pageData.total=res.data.data.total
                this.data2=res.data.data
              });
        },
      }
    }

</script>

<style scoped>
  .demo-split {
    height: 40em;
    border: 1px solid #dcdee2;
    text-align: center;
    vertical-align: middle;
  }

  .demo-split-pane {
    padding: 10px;
  }
</style>
